
// 获取元素
let hdengLu = document.querySelector('#hdengLu')
console.log(hdengLu);
let mask = document.querySelector('#mask')
console.log(mask);


// 蒙层
// 需求1, 点击hdengLu,显示mask
// hdengLu.addEventListener('click', function () {
//     mask.style.display = 'block'
// })


// 选项卡

// 获取元素
let dlspan = document.querySelector('.dlspan')
// console.log(dlspan);
let smsapn = document.querySelector('.smsapn')
// console.log(smsapn);
let user = document.querySelector('.user')
// console.log(user);
let scancode = document.querySelector('.scancode')
let closebtn = document.querySelector('.closebtn')
console.log(closebtn);
// 切换账号框
dlspan.addEventListener('click', function () {
    scancode.style.display = 'none'
    user.style.display = 'block'
})
//切换扫码框
smsapn.addEventListener('click', function () {
    user.style.display = 'none'
    scancode.style.display = 'block'
})
//点击关闭按钮,关闭mask
closebtn.addEventListener('click', function () {
    mask.style.display = 'none'
})
// API分类js
// 模拟数据
let apidate = [
    { name: '全部', keyword: '身份证实名', isBold: false },
    { name: '生活服务', keyword: '银行卡', isBold: false },
    { name: '金融科技', keyword: '短信', isBold: false },
    { name: '交通地理', keyword: '天气', isBold: false },
    { name: '充值缴费', keyword: '短信', isBold: false },
    { name: '数据智能', keyword: '手机归属地', isBold: false },
    { name: '企业工商', keyword: 'IP', isBold: false },
    { name: '应用开发', keyword: '手机归属地', isBold: false },
    { name: '电子商务', keyword: 'IP', isBold: false },
    { name: '吃喝玩乐', keyword: '视频', isBold: false },
    { name: '文娱视频', keyword: '视频', isBold: false },
    { name: '免费接口大全', keyword: '短信', isBold: true },
    { name: '短信', keyword: '身份证实名', isBold: false },
    { name: '汽车', keyword: '手机归属地', isBold: false },
    { name: '核验', keyword: '银行卡', isBold: false },
    { name: '最新发布', keyword: '银行卡', isBold: true },
    { name: 'API私有化部署', keyword: '身份证实名', isBold: true },

]
// 需求1,将模拟好的数据通过渲染到apisortul

let apisortUl = document.querySelector('.apisort-ul')
// console.log(apisortUl);

// 保存组装好的数据
let apihtml = ''

// 遍历
apidate.forEach(function (v) {
    // console.log(v);

    apihtml += `
        <li class="${v.isBold ? 'ative' : ''}"  data-keyword="${v.keyword}">${v.name}</li>
    
    `
})
// 渲染到apisortUl
apisortUl.innerHTML = apihtml




// 需求2:使用事件委派,给apisortUl注册点击事件,将当前事件源的文本渲染到inpsz
// 当前事件源的自定义属性keyword,apiText
// 获取元素
let inpSz = document.querySelector('.inpsz')
// console.log(inpSz);
let apiText = document.querySelector('.api-text')
// console.log(apiText);

apisortUl.addEventListener('click', function (e) {
    // 筛选出事件源,筛选出触发事件的标签对象
    if (e.target.nodeName === 'LI') {
        // 渲染文本
        inpSz.textContent = e.target.textContent

        // 获取当前事件源的自定义属性
        apiText.placeholder = e.target.dataset.keyword;

    };

})


// api列表
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]
// 获取元素
let apLiast = document.querySelector('.apiiast')
console.log(apLiast);

// 定义变量保存
let listHtml = ''
// 遍历
listDataArr.forEach(function (v) {
    // 组装数据
    listHtml += `
    <li>
    <span  class="enter ${v.isSpecial ? 'onblock' : ''}">企业专用</span>
    <a href = './particle.html' class="api-cent">
        <img src="../imgs/${v.img}"alt="">
        <p>${v.name}</p>
        <p class="mb20 ${v.price === '免费' ? 'green' : 'red'}">${v.price}</p>
    </a>

    <button class="sqbtn">申请数据</button>
`
})
// 渲染到页面apLiast中
apLiast.innerHTML = listHtml


// 点击sqbtn,显示mask
// 获取
let sqbtn = document.querySelectorAll('.sqbtn')


apLiast.addEventListener('click', function (e) {
    // 筛选出事件源,按钮sqbtn
    if (e.target.className === 'sqbtn') {
        mask.style.display = 'block'
    };
})

// 点击mask 隐藏蒙层
mask.addEventListener('click', function () {
    mask.style.display = 'none'
})

console.log(modal);
// 阻止事件冒泡
modal.addEventListener('click', function (e) {
    e.stopPropagation();
})



// 表单验证


// 获取元素
let useripnt = document.querySelector('#useripnt')
// console.log(useripnt);
let dateIocn = document.querySelector('#dateIocn')
// console.log(dateIocn);
let pwdiput = document.querySelector('#pwdiput')
console.log(pwdiput);
let egeIocn = document.querySelector('#egeIocn')
console.log(egeIocn);
// let password = document.querySelector('password')
// console.log(password);
// 需求4.输入用户名时(),验证输入内容的长度是否大于0,并且隐藏自己
// 事件源 useripnt
// 事件类型 input keyup
// 验证账号

useripnt.addEventListener('input', function () {
    if (useripnt.value.length > 0) {
        dateIocn.style.display = 'block'
    } else {
        dateIocn.style.display = 'none'
    };
})

// 点击dateIocn,清除useripnt,隐藏自己
dateIocn.addEventListener('click', function () {
    // 清空useripnt
    useripnt.value = ''
    // 隐藏自己
    dateIocn.style.display = 'none'

})

// 需求6.输入密码时(),验证输入内容的长度是否大于0,并且隐藏自己
// 事件源 password
// 事件类型 input keyup
// 验证账号

pwdiput.addEventListener('input', function () {
    if (pwdiput.value.length > 0) {
        egeIocn.style.display = 'block'
    } else {
        egeIocn.style.display = 'none'
    };
})
// 需求7: 切换眼睛
//  点击egeIocn,判断
// 偶数次点击: egeIocn的src:./ img / close.png password的type: password
// 奇数次点击:egeIocn的src:./ img / open.png  password的type: text
//定义一个数保存
let count = 0
egeIocn.addEventListener('click', function () {
    ++count//自增
    if (count % 2 != 0) {
        // 奇数次点击
        egeIocn.src = '../imgs/open.png'
        pwdiput.type = 'text'
    } else {
        // 偶数次点击
        egeIocn.src = '../imgs/close.png'
        pwdiput.type = 'password'
    }
})


let userTips = document.querySelector('#userTips')
console.log(userTips);
let pswdTips = document.querySelector('#pswdTips')
console.log(pswdTips);

// 定义正则表达式
// 创建账号验证规则-正则表达式
let userReg = /^1[345678][0-9]{9}$/
// 创建账号验证规则-正则表达式
let pwdReg = /^\d{6}$/ //六位数字

// 需求8, 账号失去焦点, 验证账号是否合法
useripnt.addEventListener('blur', function () {
    let bool = (userReg.test(useripnt.value));
    if (bool) {
        userTips.textContent = ''
    } else {
        userTips.textContent = '账号不正确请重新输入哦!'

    }
})
// 需求8, 密码失去焦点, 验证密码是否合法
pwdiput.addEventListener('blur', function () {
    let bool = (pwdReg.test(pwdiput.value));
    if (bool) {
        pswdTips.textContent = ''
    } else {
        pswdTips.textContent = '密码必须是六位数字哦!'

    }
})

let ModBtn = document.querySelector('#ModBtn')
console.log(ModBtn);



// 需求10,点击登录按钮(ModBtn),验证输入信息的合法性
ModBtn.addEventListener('click', function () {
    if (!userReg.test(useripnt.value)) {
        userTips.textContent = '账号不正确请重新输入哦!'
    } else if (!pwdReg.test(pwdiput.value)) {
        pswdTips.textContent = '密码必须是六位数字哦!'
    } else {
        location.href = './home.html'
    }
})


























